import { Input, Radio , DatePicker, Table, Space,Row ,Select } from 'antd';

const { Search } = Input;
import React, { useState, useRef} from 'react';

const { Option } = Select;
import { GridContent } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { EditableProTable } from '@ant-design/pro-table';
import styles from './style.less'
import { PlusOutlined } from '@ant-design/icons';



const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const Department: React.FC = () => {
  type GithubIssueItem = {


    id: number;
    planName: string;//	计划名称
    planValue: string;//	计划名称
    projectName: number;//	项目名称
    location: string;//	区域位置
    startTime: Date;//		开始时间
    endTime: Date;//		结束时间
    cycle: string;//巡检周期
    remarkse: string;//备注
    createTime: Date;//创建时间
    enable: number;//是否启用
    inspector: string;//巡检人
  };
  const tableListDataSource: GithubIssueItem[] = [];
  
  
  for (let i = 0; i < 5; i += 1) {
    tableListDataSource.push({
      id: i,
      planName:'计划名称'+i,
      planValue: '计划内容'+i,
      projectName:'项目名称'+i,
      location: '区域位置'+i,
      startTime: new Date(),
      endTime: new Date(),
      cycle: '巡检周期'+i,
      remarkse: '这是一个备注'+i,
      createTime: new Date(),
      enable: i % 2 === 1 ?1: 0,
      inspector: '巡检人'+i
    });
  }
  
  
  const valueEnum = {
    0: 'qi',
    1: 'wei',
  };
  
  
  const columns: ProColumns<GithubIssueItem>[] = [
  
    {
      title: '标题',
      dataIndex: 'planName',
      copyable: true,
      ellipsis: true,
      tip: '标题过长会自动收缩',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },  {
      title: '计划内容',
     
      dataIndex: 'planValue',
   
     
    },
    {
      title: '项目名称',
      
      align: 'right',
      dataIndex: 'projectName',
    },
    {
      title: '区域位置',
      
      align: 'right',
      dataIndex: 'location',
    },
     {
      title: '开始时间',
     
       valueType: 'date',
      dataIndex: 'startTime',
    },
       {
      title: '结束时间',
     
       valueType: 'date',
      dataIndex: 'endTime',
    },
      {
      title: '巡检周期',
      dataIndex: 'cycle',
      ellipsis: true,
    
    },
     {
      title: '备注',
      dataIndex: 'remarkse',
  
      ellipsis: true,
   
    },
     {
      title: '创建时间',
    
      key: 'since',
      dataIndex: 'creationTime',
      valueType: 'date'
    },
    {
      title: '是否启用',
      dataIndex: 'enable',
      valueType: (item) => ({
        status: valueEnum[item.status],
      }),
    },
   
   
    {
      title: '巡检人',
      dataIndex: 'inspector',
      ellipsis: true,
     
 
    },
    {
      title: '状态',
      dataIndex: 'enable',
      filters: true,
      onFilter: true,
      valueType: 'select',
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        open: {
          text: '未解决',
          status: 'Error',
        },
        closed: {
          text: '已解决',
          status: 'Success',
          disabled: true,
        },
        processing: {
          text: '解决中',
          status: 'Processing',
        },
      },
    },
    {
      title: '标签',
      dataIndex: 'inspector',
     
    formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '创建时间',
      key: 'showTime',
      dataIndex: 'createTime',
      valueType: 'date',
      sorter: true,
      // hideInSearch: true,
    },
  
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action?.startEditable?.(record.id);
          }}
        >
          编辑
        </a>,
        <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
          查看
        </a>,
      
      ],
    },
  ];
  
  
  const onSearch = value => console.log(value);

  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<GithubIssueItem[]>([]);
    

    return (
      <GridContent>
      <React.Fragment>
        <Row  style={{justifyContent: 'flex-end'}}>
          <Search placeholder="培训主题"   size="large" onSearch={onSearch} style={{ width: 400 ,margin: '0 25px 20px'}} />
        </Row>
      <EditableProTable<GithubIssueItem>
        rowKey="id"
        maxLength={5}
        recordCreatorProps={ false }
       
        columns={columns}
        request={async () => ({
          data: tableListDataSource,
          total: 3,
          success: true,
        })}
        value={dataSource}
        onChange={setDataSource}
        editable={{
          type: 'multiple',
          editableKeys,
          onSave: async (rowKey, data, row) => {
            console.log(rowKey, data, row);
            await waitTime(2000);
          },
          onChange: setEditableRowKeys,
        }}
      />
        </React.Fragment>
      </GridContent>
    );
};

export default Department;